<template>
  <table class="layui-table" :lay-even="even" :lay-skin="skin" :lay-size="size">
    <colgroup>    
      <col v-for="c in columns" :width="c.width">
    </colgroup>
    <thead v-if="columns">
      <tr>
        <th v-for="item in columns" :key="item.key">{{ item.title }}</th>
      </tr> 
    </thead>
    <tbody>
      <tr v-for="item in data">
        <td v-for="col in columns">{{ item[col.key] }}</td>
      </tr>
    </tbody>
  </table>
</template>

<script>
import { oneOf } from "../../utils/assist";

export default {
  name: "Table",
  props: {
    columns: Array, // 数据列
    data: Array, // 数据
    even: Boolean, // 隔行变色,
    size: {
      //尺寸  sm 小尺寸  lg 大尺寸
      type: String,
      validator(value) {
        return oneOf(value, ["sm", "lg"]);
      }
    },
    skin: {
      // 主题风格
      type: String,
      validator(value) {
        return oneOf(value, ["line", "row", "nob"]);
      }
    }
  }
};
</script>

<style scoped>

</style>